<template>
	<view class="p-bot20">
		<!-- #ifdef MP-WEIXIN -->
		<navBar :Back="false" :bgMake="5" :Color="2" title="活动"></navBar>
		<!-- #endif -->
		<view class="viewbox auto m-top20" v-if="pageData.length">
			<block v-for="(item,index) in pageData" :key="index">
				<view class="row bgwhite padding20 bor_radius_10 m-bot20" @click="lookEvents(item)">
					<view class="EventsBox">
						<image :src="$imgUrls(item.cover)" mode="widthFix" class="rows"></image>
						<view class="finish flexac" v-if="item.state == 3">活动已结束</view>
					</view>
					<text class="ellipsis_3 black size30 bold m-top16 line40" selectable>{{item.name}}</text>
					<text class="rows color_33 h6 m-top10">活动时间：{{item.start_time}}</text>
				</view>

			</block>
		</view>
		<Events v-else title="暂无相关活动~"></Events>

	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				page: 1,
				limit: 10,
				getMore: true,
				pageData: [],
			}
		},
		onLoad() {
			this.getEventList();
		},
		onShow() {
			// #ifdef H5
			let param = `share_v_id=${this.vid}`;
			this.$H5Share(param);
		
			// #endif
		},
		methods: {
			getEventList() {
				this.$http.get({
					url: '/singleSaleEventApi/getEventList',
					data: {
						page: this.page,
						limit: this.limit,
					}
				}).then(res => {
					if (res.code != '200') return this.$Toast(res.mgs);
					const result = res.data || [];
					this.page == 1 ? this.pageData = result : this.pageData = this.pageData.concat(result);
					if (result.length < this.limit) this.getMore = false;
				})
			},
			lookEvents(item) {
				this.toUrl(`/pages/EventsDetails/EventsDetails?event_id=${item.event_id}`)
			}
		},
		computed: {
			...mapState(['share', 'vid']),
		},
		onReachBottom() {
			if (!this.getMore) return;
			this.page++;
			this.getEventList();
		},
		onShareAppMessage() {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/startUp/startUp?share_v_id=${this.vid}`,
				imageUrl: share.imageUrl
			}
		},


	}
</script>
<style lang="scss">
	page {
		background-color: $pageBg;
	}
</style>
<style lang="scss" scoped>
	.EventsBox {
		width: 100%;
		position: relative;
		border-radius: 10rpx;
		overflow: hidden;
		transform: translateY(0);
	}

	.finish {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		color: #ffffff;
		font-size: 28rpx;
	}
</style>